<script setup>
import placeholderImg from '@/assets/img/img_placeholder_logo.png'
import { useInitSwiper } from '~/composables/swiper'
import { getBanners } from '~/service'

defineProps({
  active: Boolean,
})

const { locale } = useLocale()

const { swiper, init } = useInitSwiper()

const { resolveImgURL } = useGlobalStore()

const data = ref({})
const list = computed(() => data.value?.list || [])

const loading = ref(false)
const activeIndex = ref(0)
function onSlide(e) {
  activeIndex.value = e.activeIndex
}
onMounted(async () => {
  loading.value = true
  try {
    data.value = await getBanners({ page_id: 1 })
  }
  finally {
    loading.value = false
  }
})

function vPlaceholder(el, binding, vnode) {
  if (!el || !vnode)
    return
  el.setAttribute('data-src', vnode?.props?.src || '')
  el.setAttribute('data-class', vnode?.props?.class || '')

  el.src = binding.value || placeholderImg
  el.className = `${el.className} w-auto h-auto! absolute left-[50%] top-[50%] translate-[-50%]`
  const img = new Image()
  img.onload = () => {
    img.onload = null
    el.replaceWith(img)
  }
  img.src = el.getAttribute('data-src')
  img.className = el.getAttribute('data-class')
}
</script>

<template>
  <section h="screen" relative class="bg-[#000]">
    <div v-if="loading" class="absolute left-0 top-0 h-full w-full">
      <img class="absolute left-[50%] top-[50%] h-auto w-auto translate-[-50%]" :src="placeholderImg" />
    </div>
    <Swiper
      v-else
      class="h-full"
      :slides-per-view="1"
      :loop="false"
      @swiper="init"
      @slide-change="onSlide"
    >
      <SwiperSlide v-for="(item, index) in list" :key="item.id">
        <div class="relative h-full flex items-center px-[190px] max-md:px-[32px]">
          <div class="absolute left-0 top-0 h-full w-full">
            <img
              v-placeholder
              :src="resolveImgURL(item.img_url)"
              class="h-full w-full object-cover"
            />
          </div>
          <div v-show="active && index === activeIndex" class="z-3" text="[#fff]">
            <h1 class="mb-[10px] animate-fade-in-down text-[72px] leading-[84px] font-sans max-md:mb-[10px] home-animate max-md:text-[28px] max-md:lh-[36px]" v-html="get(item, 'title', locale)">
            </h1>
            <h2 class="animate-fade-in-up text-[38px] font-light leading-[45px] home-animate max-md:text-[18px] max-md:lh-[22px]" v-html="get(item, 'description', locale)">
            </h2>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
    <div v-if="!loading" class="absolute left-[60px] top-[50%] z-10 h-[60px] w-[60px] translate-y-[-50%] cursor-pointer max-md:bottom-[10%] max-md:left-16 max-md:top-auto max-md:translate-y-0" @click="swiper?.slidePrev()">
      <img src="~/assets/img/icon_prev.png" />
    </div>
    <div v-if="!loading" class="absolute right-[60px] top-[50%] z-10 h-[60px] w-[60px] translate-y-[-50%] cursor-pointer max-md:bottom-[10%] max-md:right-16 max-md:top-auto max-md:translate-y-0" @click="swiper?.slideNext()">
      <img src="~/assets/img/icon_next.png" />
    </div>
  </section>
</template>
